<template>
  <div class="service-page">
    <div class="content">
      <div class="search-bar-box">
        <span>用户名:</span>
        <a-select
          class="username-select"
          placeholder="请输入用户名搜索..."
          show-search
          allow-clear
          @search="searchUserName"
          @change="changeUserName"
        >
          <a-select-option
            v-for="option in memberOptions"
            :key="option.id"
            :value="option.name"
          >
            {{ option.name }}
          </a-select-option>
        </a-select>
        <span>操作时间:</span>
        <a-range-picker
          class="date-picker"
          :show-time="{ format: 'HH:mm:ss' }"
          format="YYYY-MM-DD HH:mm:ss"
          :placeholder="['开始时间', '结束时间']"
          @change="changeDate"
        />
        <a-button icon="search" @click="onSearchBtnClick">查询</a-button>
      </div>
      <!-- table -->
      <div class="table-box">
        <a-table
          :columns="tableColumns"
          :data-source="tableData"
          :row-key="(record) => record.id"
          :loading="loading"
          :pagination="pagination"
          @change="onTableChange"
        >
          <span slot="status" slot-scope="value">{{
            value === 0 ? '待回复' : '已回复'
          }}</span>
          <a slot="operation" slot-scope="item" @click="showModal(item.id)"
            >查看</a
          >
        </a-table>
      </div>
    </div>
    <a-modal
      centered
      :width="800"
      :height="800"
      :visible="modalIsShow"
      :title="`来自用户${messegeContent ? messegeContent.name : ''}的反馈`"
      @ok="sendMessege"
      @cancel="closeModal"
    >
      <messege-modal
        :messege-content="messegeContent"
        @replyTextChanged="changeReplyText"
      />
      <template slot="footer">
        <a-button
          v-if="messegeContent && messegeContent.status === 0"
          type="primary"
          @click="sendMessege"
          >发送</a-button
        >
        <a-button
          v-if="messegeContent && messegeContent.status === 1"
          type="primary"
          @click="closeModal"
          >关闭</a-button
        >
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { queryInfoByName } from '@/api/user'
import { Vue, Component } from 'vue-property-decorator'
import { debounce } from 'lodash'
import AuditStore from '@/store/modules/audit'
import MessegeModal from '@/components/audit/MessegeModal.vue'

@Component({
  components: {
    MessegeModal,
  },
})
export default class AuditService extends Vue {
  public currentUser: any = ''

  private currentDate: any = []

  private loading: boolean = false

  private tableColumns = [
    {
      title: '#',
      dataIndex: 'id',
      key: 'id',
      width: '5%',
    },
    {
      title: '用户名',
      dataIndex: 'name',
      key: 'name',
      width: '15%',
      ellipsis: true,
    },
    {
      title: '创建时间',
      dataIndex: 'gmtCreate',
      key: 'gmtCreate',
      width: '20%',
      ellipsis: true,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: '5%',
      scopedSlots: { customRender: 'status' },
    },
    {
      title: '反馈内容',
      dataIndex: 'feedback',
      key: 'feedback',
      width: '40%',
      ellipsis: true,
    },
    {
      title: '操作',
      key: 'operation',
      scopedSlots: { customRender: 'operation' },
    },
  ]

  private pagination: any = {}

  private tableData: any[] = []

  private memberOptions: any[] = []

  private modalIsShow: boolean = false

  private messegeContent: any = null

  private selectedUserId: any = null

  private replyText: string = ''

  private selectedMessageId: any = null

  public showModal(selectedId: any) {
    this.selectedMessageId = selectedId
    AuditStore.getFeedbackContent({ id: selectedId })?.then((response: any) => {
      if (response.data.code === 100) {
        this.selectedUserId = response.data.result.userId
        this.messegeContent = response.data.result
        this.modalIsShow = true
      }
    })
  }

  public changeReplyText(value: string) {
    this.replyText = value
  }

  public sendMessege() {
    const parameters = {
      content: this.replyText,
      title: '回复',
      userId: this.selectedUserId,
      id: this.selectedMessageId,
    }
    AuditStore.sendMessege(parameters)?.then((response: any) => {
      if (response.data.code === 100) {
        this.$message.info('回复成功')
        this.modalIsShow = false
        this.queryTableData()
      } else {
        this.$message.error(response.data.message)
      }
    })
  }

  public closeModal() {
    this.modalIsShow = false
  }

  // 选择用户
  public changeUserName(value: string) {
    this.currentUser = value
  }

  // 关键字 模糊搜索用户
  public searchUserName(searchKey: string) {
    if (searchKey.trim().length >= 2) {
      this.queryUsersByName(searchKey.trim())
    }
  }
  // 防抖
  private queryUsersByName = debounce(
    (searchKey: string) => this._handleSearch(searchKey),
    100
  )

  public _handleSearch(searchKey: string) {
    const parameters = {
      name: searchKey,
    }
    queryInfoByName({ data: parameters })?.then((response: any) => {
      if (response.data.code === 100) {
        this.memberOptions = response.data.result
      }
    })
  }

  public changeDate(date: any, dateString: any) {
    this.currentDate = dateString
  }

  public mounted() {
    this.queryTableData()
  }

  /**
   * 查询 api
   */
  public queryTableData() {
    this.loading = true
    const parameters = {
      curPage: this.pagination.current ? this.pagination.current : 1,
      pageSize: 10,
      userName: this.currentUser ? this.currentUser : null,
      startTime:
        this.currentDate && this.currentDate[0] ? this.currentDate[0] : null,
      endTime:
        this.currentDate && this.currentDate[1] ? this.currentDate[1] : null,
    }
    AuditStore.getUserFeedback(parameters)?.then((response: any) => {
      if (response.data.code === 100) {
        const pagination = { ...this.pagination }
        pagination.total = response.data.result.total
        this.tableData = response.data.result.list
        this.pagination = pagination
      }
      this.loading = false
    })
  }

  /* 点击查询 */
  public onSearchBtnClick() {
    this.pagination.current = 1
    this.queryTableData()
  }

  // eslint-disable-next-line
  public onTableChange(pagination: any, filters: any, sorter: any) {
    this.pagination = pagination
    this.queryTableData()
  }
}
</script>

<style lang="less" scoped>
.service-page {
  background: #f0f2f5;
  box-sizing: border-box;
  display: block;
  height: 100%;
  padding: 12px 16px;
  width: 100%;

  .content {
    background: #fff;
    box-sizing: border-box;
    display: flex;
    flex-flow: column nowrap;
    height: 100%;
    padding: 18px;
    width: 100%;
  }

  .search-bar-box {
    display: block;
    min-height: 48px;
    padding-bottom: 18px;
    width: 100%;
  }

  .username-select {
    margin-left: 10px;
    margin-right: 20px;
    width: 190px;
  }

  .date-picker {
    margin-left: 10px;
    margin-right: 20px;
    width: 200px;
  }
}

.messege-modal {
  /deep/ .ant-modal {
    height: 500px;
    width: 800px;
  }
}

.table-box {
  overflow: auto;
}
</style>
